<template>
  <div class="app-container">
    <div class="topDiv">目标责任书模版设计</div>
    <div class="talbeDiv" v-html="html">
    </div>
    <div style="padding-top: 37px;padding-left: 30%;">
      <div class="demo-shadow" style="box-shadow: rgb(0 0 0 / 12%) 0px 2px 4px, rgb(0 0 0 / 4%) 0px 0px 6px;" @click="handleAdd">
        +<br/>
        添加管理目标项
      </div>
    </div>

    <!-- 添加或修改目标项管理记录对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="目标名称" prop="goalName">
          <el-input v-model="form.goalName" placeholder="请输入目标名称" />
        </el-form-item>
        <el-form-item label="目标简称" prop="goalJname">
          <el-input v-model="form.goalJname" placeholder="请输入目标简称" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="说明" prop="introduction">
          <el-input v-model="form.introduction" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 选择指标 -->
    <el-dialog :title="title" :visible.sync="selZbOpen" width="900px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <div class="edit_dev">
        <el-transfer v-model="selGlxZbVal" :data="zbData" :titles="['未选指标', '已选指标']" filterable  :filter-method="filterMethod"></el-transfer>
      </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormGlxZb">确 定</el-button>
        <el-button @click="cancelSelZb">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import { listZrsMbManageGoal,listZrsMbManageGoalZb, getZrsMbManageGoal,
  delZrsMbManageGoal, addZrsMbManageGoal, updateZrsMbManageGoal,
  updateZrsMbManageGoalToSaveZb,
  getZrsMbManageGoalSelZb,
  } from "@/api/business/ZrsMbManageGoal";

export default {
  name: "ZrsMbManageGoal",
  data() {
    return {
      filterMethod:null,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 目标项管理记录表格数据
      ZrsMbManageGoalList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
        mbId: null,
        goalName: null,
        goalJname: null,
        status: null,
        introduction: null,
        delTime: null,
        delBy: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        goalName: [
          { required: true, message: "目标名称不能为空", trigger: "blur" }
        ],
        goalJname: [
          { required: true, message: "目标简称不能为空", trigger: "blur" }
        ],
      },
      mbId:null,//模版名称
      selZbOpen:false,
      selGlxZbVal:[] ,//已选的管理项指标模版
      zbData:[],//没有选择的指标列表
      glxZbData:null,
      html:"",
    };
  },
  created() {
    const mbId = this.$route.params && this.$route.params.mbId;
    //console.log(tableId);
    if(mbId){
      this.mbId = mbId;
      this.queryParams.mbId = this.mbId;
      //处理业务
      this.getList();
    }else{
      this.close();
      return ;
    }
    window.handleUpdate = this.handleUpdate; //事件委托
    window.handleSelZb = this.handleSelZb;
  },
  methods: {

    /** 关闭按钮 */
    close() {
      const obj = { path: "/zhib/ZrsMbManage", query: { t: Date.now(), pageNum: this.$route.query.pageNum } };
      this.$tab.closeOpenPage(obj);
    },
    /** 查询目标项管理记录列表 */
    getList() {
      this.loading = true;
      listZrsMbManageGoalZb(this.queryParams).then(response => {
        this.ZrsMbManageGoalList = response.data.mbGlxList;
        this.glxZbData = response.data;
        //循环处理数据
        for(let key in this.ZrsMbManageGoalList){
          let zrsMbManageGoal = this.ZrsMbManageGoalList[key];
          this.html += '<div>';
          this.html += '<span>'+zrsMbManageGoal.goalName+'</span>';
          this.html +='<button  onclick="handleUpdate('+zrsMbManageGoal.mbGoalId+')" >修改</button>&nbsp;&nbsp;&nbsp;&nbsp;';
          this.html +='<button  onclick="handleSelZb('+zrsMbManageGoal.mbGoalId+')" >选择指标</button> ';
          let zrsGoalZbList = this.glxZbData['glx_zblist_'+zrsMbManageGoal.mbGoalId];
          if(zrsGoalZbList){
            this.html +='<div style="padding-top: 10px;" >';
            this.html +='<talbe class="talbeClass table-striped table-bordered table-hover">';
            this.html +='<thead>';
            this.html +='<tr style="font-size:20px;background-color: rgb(223, 223, 223);">';
            this.html +='<th style="width: 15%;">指标名称</th>';
            this.html +='  <th style="width: 25%;" colspan="2">基本要求</th>';
            this.html +='  <th style="width: 10%;">分值（分）</th>';
            this.html +='  <th style="width: 30%;">质量标准</th>';
            this.html +='  <th style="width: 10%;">考核周期</th>';
            this.html +='  <th style="width: 15%;">考核部门</th>';
            this.html +='</tr>';
            this.html +='</thead>';
            this.html +='<tbody>';
            for(let key2 in zrsGoalZbList){
              let zrsGoalZbMap = zrsGoalZbList[key2];
              this.html +=''+zrsGoalZbMap.yjrs;
            }
          }



          this.html +='';
          this.html +='';
          this.html +='';
          this.html +='';
          this.html +='';
          this.html +='';
          this.html +='';
          this.html +='';
          this.html +='';
          /**





                  <tr v-for="(zrsGoalZbMap , index) in glxZbData['glx_zblist_'+zrsMbManageGoal.mbGoalId]" >
                    <td :rowspan="zrsGoalZbMap.yjrs" v-if="index==0">{{zrsGoalZbMap.yjmc}}</td>
                    <td >{{zrsGoalZbMap.ejmc}}</td>
                  </tr>
                </tbody>
              </talbe>
            </div>
          </div>**/
        }





        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    cancelSelZb() {
      this.selZbOpen = false;
      this.zbData = null;
      this.selGlxZbVal = [] ;//已选的管理项指标模版
      this.title = "";
    },

    // 表单重置
    reset() {
      this.form = {
        mbGoalId: null,
        mbId: null,
        goalName: null,
        goalJname: null,
        status: null,
        delFlag: null,
        remark: null,
        introduction: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delTime: null,
        delBy: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    handleSelZb(mbGoalId){ //弹框选择  指标
      //弹框选择
      this.reset();
      //const mbGoalId = row.mbGoalId || this.ids
      let mbId = this.mbId;
      let param = {
        mbId:mbId,  //模版id
        mbGoalId: mbGoalId,//管理项id
      }
      getZrsMbManageGoalSelZb(param).then(response => {
        this.zbData = response.data.zbData;
        this.selGlxZbVal = response.data.selGlxZbVal == null ? []: response.data.selGlxZbVal;//已选的管理项指标模版
        this.selZbOpen = true;
        this.title = "选择指标";
        this.form.mbId = mbId;
        this.form.mbGoalId = mbGoalId;
      });
    },
    submitFormGlxZb(){
      this.form.selGlxZbVal = this.selGlxZbVal;
      updateZrsMbManageGoalToSaveZb(this.form).then(response => {
        this.$modal.msgSuccess("指标已选择！");
        this.selZbOpen = false;
        this.getList();
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.mbGoalId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      if(this.mbId){
        this.reset();
        this.open = true;
        this.title = "添加目标项管理记录";
        this.form.mbId = this.mbId;
      }else{
        this.$modal.msgSuccess("参数有误，请检查参数！！");
        return ;
      }
    },
    /** 修改按钮操作 */
    handleUpdate(mbGoalId) {
      this.reset();
      //const mbGoalId = row.mbGoalId || this.ids
      getZrsMbManageGoal(mbGoalId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改目标项管理记录";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.mbGoalId != null) {
            updateZrsMbManageGoal(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addZrsMbManageGoal(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
  .demo-shadow {
      height: 100px;
      width: 50%;
      border: 1px solid #eee;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
  }
  .topDiv{
    padding-top: 40px;
    width: 100%;
    text-align:center;
    font-size: 28px;
  }
  .talbeDiv{
    padding-left: 40px;
    padding-top: 30px;
  }
  .talbeClass{
    /** border: 1px solid rgba(0,0,0,1); **/
    border-collapse: collapse;
    border-spacing: 0;
    max-width: 100%;
  }
  .table-bordered{
      /**  border: 1px solid rgba(0,0,0,1);**/
  }
  .table-bordered > thead > tr > th,
  .table-bordered > tbody > tr > th,
  .table-bordered > tfoot > tr > th,
  .table-bordered > thead > tr > td,
  .table-bordered > tbody > tr > td,
  .table-bordered > tfoot > tr > td{
      border: 1px solid rgba(0,0,0,1);
      text-align: center;
      font-weight: bold;
      padding:3px;
  }
  .table-striped > tr:nth-of-type(odd) {
      background-color:#c7c8c8;
  }
  .table_title_center{
      text-align: center;
  }
  .table_title_left{
      text-align: left;
  }
  .table_title_bold{
      font-weight: bold;
  }
  .el-transfer-panel{
    width: 330px;
  }
  .el-transfer-panel__body{
  height: 400px;
  }
  .el-transfer-panel__list{
  height: 400px;
  }
</style>
